<template>
	<view class="h-screen flex flex-col bg-contain bg-no-repeat relative" v-if="testPaper"
		:style="{backgroundImage:`url(${config[sex].bg})`}">
		<NavBarVue title="测试"></NavBarVue>
		<view class="flex-1 overflow-hidden">
			<view class="px-30">
				<view class="flex flex-col h-[342rpx] bg-[length:100%_100%] pt-130 px-30"
					:style="{backgroundImage:`url(${config[sex].boxBg})`}">
					<text class="font-bold text-md">{{title}}</text>
					<text class="mt-40 text-sm">{{step+1}}.{{testPaper[step].name}}</text>
				</view>
				<!--  -->
				<view class="">
					<view class="h-90 flex items-center bg-[length:100%_100%] mt-30 px-80 justify-between"
						v-for="e,i in testPaper[step].anlist" :key="i" @click="answer=e.id"
						:style="{backgroundImage:`url(${answer==e.id?config[sex].listBg[1].bg:config[sex].listBg[0].bg})`}">
						<text class="text-sm font-bold"
							:style="{color:answer==e.id?config[sex].listBg[1].color:''}">{{i+1}}.{{e.name}}</text>
						<uni-icons type="checkbox-filled" size="20" :color="config[sex].listBg[1].color"
							v-if="answer==e.id"></uni-icons>
					</view>
					<!-- <view class="h-90 flex items-center bg-[length:100%_100%] mt-30 px-80 justify-between"
						v-for="e,i in config[sex].listBg" :key="i" :style="{backgroundImage:`url(${e.bg})`}"
						@click="answer=testPaper[step].anlist[i].id">
						<text class="text-sm font-bold"
							:style="{color:answer==testPaper[step].anlist[i].id?e.color:''}">{{i+1}}.{{testPaper[step].anlist[i].name}}</text>
						<uni-icons type="checkbox-filled" size="20" :color="e.color"
							v-if="answer==testPaper[step].anlist[i].id"></uni-icons>
					</view> -->
				</view>
			</view>
		</view>
		<!--  -->
		<view class="px-20 w-full fixed bottom-40 left-0 ">
			<!-- 	<button class="mb-30 rounded-full" type="primary" @click="sex=sex==0?1:0">
				切换性别（测试样式）
			</button> -->
			<view class="btn-next rounded-full flex justify-center" :class="{'btn-nv': sex==0}" @click="onStep">
				<text class="text-white">{{step+1==testPaper.length?'解锁全部测试结果':'下一题'}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import testApi from '@/apis/apiList/testApi';
	const exapaperId = ref('')
	const sex = ref(0)
	const testPaper = ref()
	const membersheetId = ref()
	const title = ref("")
	onLoad((option) => {
		exapaperId.value = option.id
		title.value = option.title
		const {
			gender
		} = uni.getStorageSync('user')
		sex.value = gender
		memberQuestionsAdd()
	})
	const memberQuestionsAdd = () => {
		const {
			id
		} = uni.getStorageSync('user')
		testApi.memberQuestionsAdd({
			"member.id": id,
			"exapaper.id": exapaperId.value
		}).then(res => {
			membersheetId.value = res.data.id //考试ID
			testPaper.value = res.data.qulist
		})
	}
	const config = [{
		bg: "/static/test/woman_bg.png",
		boxBg: "/static/test/woman_box_bg.png",

		listBg: [{
			bg: "/static/test/list1.png",
			color: "#FF6A29",
		}, {
			bg: "/static/test/list3.png",
			color: "#CE67FF",
		}]
	}, {
		bg: "/static/test/bg.png",
		boxBg: "/static/test/man_box_bg.png",
		listBg: [{
			bg: "/static/test/list2.png",
			color: "#329EFF",
		}, {
			bg: "/static/test/list1.png",
			color: "#FF6A29",
		}]
	}]

	const step = ref(0)
	const answer = ref(0)
	// 下一步
	const onStep = () => {
		if (answer.value === 0) {
			uni.showToast({
				icon: 'none',
				title: "请选择答案"
			})
			return
		}
		if (step.value < testPaper.value.length - 1)
			testApi.memberAnswerSheetAdd({
				"membersheet.id": membersheetId.value,
				"exaquest.id": testPaper.value[step.value].id,
				"exanswer.id": answer.value
			}).then(res => {
				answer.value = 0
				step.value += 1
			})
		else testApi.memberAnswerSheetEnd({
			id: membersheetId.value,
		}).then(res => {
			uni.redirectTo({
				url: `/pages/test/examResults?id=${membersheetId.value}&title=${title.value}`
			})
		})

	}
	const back = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style lang="scss" scoped>
	.btn-next {
		background: url(/static/test/bg_btn_blue.png) no-repeat;
		background-size: cover;
		height: 104rpx;

		&.btn-nv {
			background: url(/static/test/bg_btn_pink.png) no-repeat;
			background-size: cover;
			height: 104rpx;
		}

		text {
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 40rpx;
			margin-top: 24rpx;
		}
	}
</style>